<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>设置</title>
	{$h->import('static/css/layui.css')}
	{$h->import('static/css/HyqPublic.css')}
	{$h->import('static/css/StoreCodeSetting.css')}

</head>
<body>
<div class="public_Pop_container" style="padding: 24px 0 0 32px;">
	<h3 class="public_PopTitle">设置</h3>
	<div class="PopSetting_main_container">
		<div class="PopSetting_mainLeft_container">
			<img class="PopSetting_mainPhone_bg_container" src="http://weidogstest.oss-cn-beijing.aliyuncs.com/755bb61d09d97d73be9e0bce2713151e.png">
			<h5 class="PopSetting_mainPhone_title">添加店主</h5>
			<div class="PopSetting_mainPhone_container">
				<div class="PopSetting_mainPhoneHeader_container">
					<div class="PopSetting_mainPhoneHeader_location_container">
						<svg t="1622797340460" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2727" width="9" height="9"><path d="M512 32c-191.6 0-347 159.6-347 356.4 0 188.5 185.2 437.9 328.3 595.3 10.1 11.1 27.3 11.1 37.4 0C673.8 826.3 859 576.9 859 388.4 859 191.6 703.6 32 512 32z m0 467.4c-76.7 0-138.8-62.1-138.8-138.8S435.3 221.8 512 221.8s138.8 62.1 138.8 138.8S588.7 499.4 512 499.4z" p-id="2728" fill="#595959"></path></svg>
						<span>深圳市</span>
						<svg t="1622797457609" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6421" width="8" height="8"><path d="M512 579.669333L286.165333 353.834667a42.624 42.624 0 1 0-60.330666 60.330666l256 256a42.624 42.624 0 0 0 60.330666 0l256-256a42.624 42.624 0 1 0-60.330666-60.330666L512 579.669333z" p-id="6422" fill="#595959"></path></svg>
					</div>
					<div class="PopSetting_mainPhoneHeader_search_container">
						<p>请输入门店名称</p>
					</div>
				</div>
				<!-- 切换 默认样式 -->
				<div class="PopSetting_mainPhone_qrcode_container">
					<div class="PopSetting_mainPhone_qrcode_content">
						<div class="PopSetting_mainPhone_qrcodeHeader_container">
							<div class="PopSetting_mainPhone_qrcodeHeader_content">
								<img src="http://weidogstest.oss-cn-beijing.aliyuncs.com/ce8383e62540705e87b9613e10ff8e88.png" id="demo2s">
							</div>
							<div class="PopSetting_mainPhone_qrcodeHeaderInfo_content">
								<b>深圳分店</b>
								<span>{if $set->status == 1}{$set->qy_recommend}{/if}</span>
							</div>
							
						</div>
						<img class="PopSetting_mainPhone_qrcode" src="http://weidogstest.oss-cn-beijing.aliyuncs.com/4d2d2764c19d0b6962fe41eaec2b7c07.png">
						<div class="ScanQrcodeText_container">
							<svg t="1622801276149" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2135" width="12" height="12"><path d="M898 398c-17.48-42.18-55.58-67.37-101.93-67.37-21.39 0-41 5.57-58 16.27a110.86 110.86 0 0 0-169.64-21.29 110.85 110.85 0 0 0-117-22.33V125.91a100.93 100.93 0 0 0-201.86 0v312.41A111 111 0 0 0 72.71 569.69C82.2 588 212.85 840.31 260 925a108.58 108.58 0 0 0 8.64 15c0.53 0.8 1.07 1.57 1.65 2.32a108.7 108.7 0 0 0 88 44.91H698.8c52.06 0 85.21-9.59 107.48-31.09 22.07-21.31 26.66-48.08 30.7-71.69l68.28-421.56A119.66 119.66 0 0 0 898 398z m-61.87 53.76L768 872.82c-3 17.18-5.12 28-10.3 33-4.43 4.28-18 11.45-58.86 11.45H358.31a38.47 38.47 0 0 1-31.13-15.72c-1.39-2.42-2.91-5.11-4.56-8-0.08-0.2-0.18-0.39-0.26-0.59a35.06 35.06 0 0 0-4.58-8.13c-50-90.62-181.8-345.13-183.23-347.9l-0.78-1.42a41 41 0 0 1 15-56 41 41 0 0 1 55.91 14.83c2.56 4.59 31.8 56.79 45.41 80.7a35 35 0 0 0 69.53-5.69V125.91a30.93 30.93 0 1 1 61.86 0v377.51a35 35 0 0 0 70 0v-97a41 41 0 0 1 82 0v87a35 35 0 0 0 70 0v-87a41 41 0 1 1 82 0v87a35 35 0 0 0 70 0v-58.2a56.12 56.12 0 0 1 10.68-20.81c7.81-9.43 17.32-13.83 29.94-13.83 22.52 0 32.69 13.14 37.26 24.16a49.68 49.68 0 0 1 2.81 26.97z" fill="#B5BEC8" p-id="2136"></path></svg>
							<p class="ScanQrcodeText">{if $set->status == 1}{$set->scanqrcode?$set->scanqrcode:'长按识别二维码添加店主'}{else}长按识别二维码添加店主{/if}</p>
						</div>
						
						<div class="PopSetting_mainPhone_qrcodeAddress_container" {if $set->is_address != 1} style="display:none;" {/if}>
							<svg t="1622797340460" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2727" width="15" height="15"><path d="M512 32c-191.6 0-347 159.6-347 356.4 0 188.5 185.2 437.9 328.3 595.3 10.1 11.1 27.3 11.1 37.4 0C673.8 826.3 859 576.9 859 388.4 859 191.6 703.6 32 512 32z m0 467.4c-76.7 0-138.8-62.1-138.8-138.8S435.3 221.8 512 221.8s138.8 62.1 138.8 138.8S588.7 499.4 512 499.4z" p-id="2728" fill="#a1d2ff"></path></svg>
							<span>深圳市XX路XX号深圳大学</span>
						</div>
					</div>
					<h5>好用的企业微信管理工具</h5>
				</div>
				<!-- 切换 自定义海报 -->
				<div class="PopSetting_mainPhone_custom_container" style="display:none">
					<div class="PopSetting_mainPhone_custom_content">
						<img src="" class="PopSetting_mainPhone_custom_imgBg demo1" id="demo1">
							<img class="phoneQrcodeImg PublicAbsoluteQrcode" style="display:none;top:{$set->style->tops};left: {$set->style->lefts}" src="http://weidogstest.oss-cn-beijing.aliyuncs.com/4d2d2764c19d0b6962fe41eaec2b7c07.png">
					</div>
				</div>
			</div>
			<div class="PopSetting_mainLeftTips_container">
				<p>此二维码只是预览效果，请勿直接使用</p>
			</div>
		</div>
		<div class="PopSetting_mainRight_container">
			<div class="public_form_conainer public_search_container">
				<span class="public_formTitle formTitle_FixedWidth">页面标题：</span>
				<div class="public_search_content" style="flex: 1;">
					<input type="text" placeholder="请输入页面标题" id="title" value="{$set->title}">
				</div>
			</div>
			<div class="public_form_conainer public_radio_container layui-form">
				<span class="public_formTitle formTitle_FixedWidth">扫码页面展示：</span>
				<div class="public_radio_content" id="pageType">
					<input type="radio" name="pageType" lay-filter="pageType" value="1" title="默认样式" {if $set->type == 1 || !$set->id} checked="" {/if}>
					<input type="radio" name="pageType" lay-filter="pageType" value="2" title="自定义海报" {if $set->type == 2} checked="" {/if}>
				</div>
			</div>
			<div class="PopSetting_ExhibitionSwitch_container">
				<div class="PopSetting_ExhibitionSwitch_default_container">
					<div class="public_form_conainer public_switch_container layui-form">
						<span class="public_formTitle public_formTitleImportant formTitle_FixedWidth">企业介绍：</span>
						<div class="public_switch_content" id="openStatus">
							<input type="checkbox" name="openStatus"  lay-filter="openStatus" lay-skin="switch" {if $set->status == 1}checked{/if}>
							<input type="hidden" id="statuss"  value="{$set->statuss?$set->statuss:'2'}">
						</div>
					</div>
					<div class="public_form_conainer public_search_container openStatusContainer" {if $set->status != 1}style="display:none;"{/if}>
						<span class="public_formTitle formTitle_FixedWidth"></span>
						<div class="public_search_content" style="flex: 1;">
							<input type="text" placeholder="请输入企业介绍" id="qy_recommend" value="{$set->qy_recommend}">
						</div>
					</div>
					<div class="public_form_conainer public_upImg_container">
						<span class="public_formTitle formTitle_FixedWidth">企业logo：</span>
						<div class="public_upImg_content">
							<div class="public_upImage_container" style="flex: 1;">
								<img src="" class="layui-upload-img customImgBG demo2" id="posterimgshow">
								<input type="hidden" id="qy_logo" value="">
							</div>
							<button type="button" data-target="posterimg" class="layui-btn layui-btn-sm layui-btn-normal select_img">
			                    <i class="layui-icon">&#xe654;</i>上传海报
		                  	</button>
						</div>
					</div>
					<div class="public_form_conainer public_search_container">
						<span class="public_formTitle formTitle_FixedWidth">扫码引导语：</span>
						<div class="public_search_content" style="flex: 1;">
							<input type="text" value="{$set->scanqrcode?$set->scanqrcode:'长按识别二维码识别店主'}" id="scanqrcode">
						</div>
					</div>
					<div class="public_form_conainer public_switch_container layui-form">
						<span class="public_formTitle public_formTitleImportant formTitle_FixedWidth">门店地址：</span>
						<div class="public_switch_content">
							<input type="checkbox" name="storeAddress" lay-filter="storeAddress" lay-skin="switch" {if $set->is_address == 1} checked{/if}>
							<input type="hidden" id="is_address" value="{$set->is_address?$set->is_address:'2'}">
						</div>
					</div>
				</div>
				<div class="PopSetting_ExhibitionSwitch_customMain_container" style="display:none;">
					<div class="PopSetting_ExhibitionSwitch_custom_container">
						<div class="PopSetting_ExhibitionSwitch_custom_content">
							<div class="PopSetting_ExhibitionSwitch_customImg_container">
								<div class="PopSetting_ExhibitionSwitch_customImg_content">
									<img src="" class="layui-upload-img customImgBG" id="bg">
									<div class="AbsoluteQrcode PublicAbsoluteQrcode" style="display:none;top:{$set->style->top};left: {$set->style->left}" id="draggable">
										<img src="http://weidogstest.oss-cn-beijing.aliyuncs.com/4d2d2764c19d0b6962fe41eaec2b7c07.png">
										<input type="hidden" id="bgs">
									</div>
									<p class="PublicAbsoluteQrcodeText">请点击右下角上传背景图</p>
								</div>
								<button type="button" data-target="posterimgs" class="layui-btn layui-btn-sm layui-btn-normal select_img">
				                    <i class="layui-icon">&#xe654;</i>上传海报
			                  	</button>
							</div>
						</div>
					</div>
					<div class="PopSetting_ExhibitionSwitch_customTips_container">
						<div class="PopSetting_ExhibitionSwitch_customTips_content">
							<p>海报设计须知：</p>
							<div class="PopSetting_ExhibitionSwitch_customTipsText_content">
								<p>1、尺寸：720px * 1280px，分辨率72</p>
								<p>2、门店海报其他部分皆可自定义设计</p>
								<p>3、门店海报大小不超过2M</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="public_PopMain_container layui-form" style="margin: 12px 40px;">
		<div class="public_formSubmit_conainer">
			<button class="layui-btn layui-btn-normal" onclick="sub()">确定</button>
		</div>
	</div>
</div>
<input type="hidden" value="{$set->style->left}" id="imgurl_left"/>
<input type="hidden" value="{$set->style->top}" id="imgurl_top"/>
<input type="hidden" value="{$set->style->lefts}" id="imgurl_lefts"/>
<input type="hidden" value="{$set->style->tops}" id="imgurl_tops"/>
<script src="/cdn/jquery.min.js"></script>
{$h->import('static/layui/2.5.6-layui.all.js')}
<script src="/js/ajax.js"></script>
<script src="/cdn/clipboard.js"></script>
<script type="text/javascript">
$('.select_img').on('click',function  () {
    var targetId=this.getAttribute('data-target');
    layer.open({
    title:'图片库',
    type: 2,
    area: ['700px', '450px'],
    fixed: false, //不固定
    maxmin: false,
    content: '/imgLib/lib.html?type=vshop_img&target='+targetId
    });
})

window.onload=function(){
	if(!"{$set->id}")return false;
	if("{$set->type}" == "1"){
		var url = "{$set->qy_logo}";
		var demo2s=$('#demo2s');
	    var inputEle=$('#qy_logo');
	    var prevEle=$('#posterimgshow');
	    inputEle.val(url);
	    prevEle.attr('src',url);
	    demo2s.attr('src',url);
	}else{
		var url = "{$set->background}";
		var demo1=$('#demo1');
	    var bgs=$('#bgs');
	    var bg=$('#bg');
	    bgs	.val(url);
	    bg.attr('src',url);
	    demo1.attr('src',url);
	    $('.PublicAbsoluteQrcode').show();
        $('.PublicAbsoluteQrcodeText').hide();
	    $(".PopSetting_ExhibitionSwitch_default_container").hide();
  		$(".PopSetting_mainPhone_qrcode_container").hide();
  		$('.PopSetting_mainPhone_custom_container').show();
  		$(".PopSetting_ExhibitionSwitch_customMain_container").show();
	}
} 


window.uploadImgCallback=function (tgt,url) {
    if(tgt=='posterimg'){
	    var demo2s=$('#demo2s');
	    var inputEle=$('#qy_logo');
	    var prevEle=$('#posterimgshow');
	    inputEle.val(url);
	    prevEle.attr('src',url);
	    demo2s.attr('src',url);
	}else if(tgt == "posterimgs"){
		var demo1=$('#demo1');
	    var bgs=$('#bgs');
	    var bg=$('#bg');
	    bgs	.val(url);
	    bg.attr('src',url);
	    demo1.attr('src',url);
	    $('.PublicAbsoluteQrcode').show();
        $('.PublicAbsoluteQrcodeText').hide();
	}
};
</script>
<script>
function sub(){
	var type = $('#pageType input[name="pageType"]:checked').val();
	var title = $('#title').val();
	if(type == 1){
		var status = $('#statuss').val();
		var is_address = $("#is_address").val();
		var scanqrcode = $("#scanqrcode").val();
		var qy_logo = $("#qy_logo").val();
		var qy_recommend = $("#qy_recommend").val();
		if(status == 1 && !qy_recommend || !title || !scanqrcode || !qy_logo){
			layer.msg("必填項不能为空");
			return false;
		}
		myAjaxPost(false, true, '', { type:type,title:title,status:status,is_address:is_address,scanqrcode:scanqrcode,qy_logo:qy_logo,qy_recommend:qy_recommend}, function (resp) {
			layer.msg(resp.msg);
			if(resp.status == "success"){
				setTimeout(function(){
	                parent.location.reload();
	            },1000);
			}
		})
	}else{
		var imgurl_left = $("#imgurl_left").val();
		var imgurl_top = $("#imgurl_top").val();
		var imgurl_lefts = $("#imgurl_lefts").val();
		var imgurl_tops = $("#imgurl_tops").val();
		var bgs = $("#bgs").val();
		if(!title || !bgs){
			layer.msg("必填項不能为空");
			return false;
		}
		myAjaxPost(false, true, '', { imgurl_tops:imgurl_tops,imgurl_lefts:imgurl_lefts,type:type,title:title,imgurl_left:imgurl_left,imgurl_top:imgurl_top,bgs:bgs}, function (resp) {
			layer.msg(resp.msg);
			if(resp.status == "success"){
				setTimeout(function(){
	                parent.location.reload();
	            },1000);
			}
		})
	}
}
//表单
layui.use('form', function(){
	var form = layui.form;
  // 单选框选中
  form.on('radio(pageType)', function (data) {
  	if ($('#pageType input[name="pageType"]:checked').val() == "1") {
  		$(".PopSetting_ExhibitionSwitch_customMain_container").hide();
  		$('.PopSetting_mainPhone_custom_container').hide();
  		$(".PopSetting_mainPhone_qrcode_container").show();
  		$(".PopSetting_ExhibitionSwitch_default_container").show();
  	}else if($('#pageType input[name="pageType"]:checked').val() == "2"){
  		$(".PopSetting_ExhibitionSwitch_default_container").hide();
  		$(".PopSetting_mainPhone_qrcode_container").hide();
  		$('.PopSetting_mainPhone_custom_container').show();
  		$(".PopSetting_ExhibitionSwitch_customMain_container").show();
  	}

  	form.render();
  });
  // 开启状态switch
  form.on('switch(openStatus)', function (data) {
  	// console.log(data.elem.checked); //开关value值，也可以通过data.elem.value得到
  	if(data.elem.checked == true){
  		$("#statuss").val(1);
  		$('.openStatusContainer').show();
  		$('#openStatusInput').val('');
  		$('.PopSetting_mainPhone_qrcodeHeaderInfo_content span').text('');
  		$('.PopSetting_mainPhone_qrcodeHeaderInfo_content span').show();
  	}else if(data.elem.checked == false){
  		$("#statuss").val(2);
  		$('.openStatusContainer').hide();
  		$('#openStatusInput').val('');
  		$('.PopSetting_mainPhone_qrcodeHeaderInfo_content span').hide();
  		$('.PopSetting_mainPhone_qrcodeHeaderInfo_content span').text('');
  	}

  	form.render();
  });
  //门店地址switch storeAddress
  form.on('switch(storeAddress)', function (data) {
  	console.log(data.elem.checked); //开关value值，也可以通过data.elem.value得到
  	if(data.elem.checked == true){
  		$("#is_address").val(1);
  		$('.PopSetting_mainPhone_qrcodeAddress_container').show();
  	}else if(data.elem.checked == false){
  		$("#is_address").val(2);
  		$('.PopSetting_mainPhone_qrcodeAddress_container').hide();
  	}

  	form.render();
  });
});

</script>
<script type="text/javascript">
	// 复制粘贴
	var clipboard = new ClipboardJS('#CopyLink');
	clipboard.on('success', function(e) {
	    alert('复制成功');
	    console.info(e.text);
	});
	clipboard.on('error', function(e) {
	    console.error('Action:', e.action);
	    console.error('Trigger:', e.trigger);
	});
	// 开启状态输入框改变事件
	$('#qy_recommend').bind('keyup', function(event) {
		$('.PopSetting_mainPhone_qrcodeHeaderInfo_content span').text($(this).val());
	})
	// 扫码引导语
	$('#scanqrcode').bind('keyup', function(event) {
		$('.ScanQrcodeText').text($(this).val());
	})
</script>
<!-- 拖拽 -->
<script type="text/javascript">
	var divs = document.querySelector('#draggable');
	//元素的鼠标落下事件
	divs.onmousedown = function(ev){

      //event的兼容性
      var ev = ev||event;

      //获取鼠标按下的坐标
      var x1 = ev.clientX;
      var y1 = ev.clientY;

      //获取元素的left，top值
      var l = divs.offsetLeft;
      var t = divs.offsetTop;

      //给可视区域添加鼠标的移动事件
      document.onmousemove = function(ev){

          //event的兼容性
          var ev = ev||event;

          //获取鼠标移动时的坐标
          var x2 = ev.clientX;
          var y2 = ev.clientY;

          //计算出鼠标的移动距离
          var x = x2-x1;
          var y = y2-y1;

          //移动的数值与元素的left，top相加，得出元素的移动的距离
          var lt = y+t;
          var ls = x+l;
          if(lt>=247){
          	lt = 247
          }
          if(lt<=0){
          	lt = 0
          }
          if(ls<=0){
          	ls = 0
          }
          if(ls>=117){
          	ls = 117
          }
          //更改元素的left，top值
          divs.style.top = lt+'px';
          divs.style.left = ls+'px';
          $('.phoneQrcodeImg').css('left',ls*2.24 + 'px');
          $('.phoneQrcodeImg').css('top',lt*2.24 + 'px');
          $('#imgurl_lefts').val(parseInt(ls*2.24));
          $('#imgurl_tops').val(parseInt(lt*2.24));
          $('#imgurl_left').val(ls);
          $('#imgurl_top').val(lt);
      }

      //清除
      document.onmouseup = function(ev){

      	document.onmousemove = null;

      }

  }
</script>
</body>
</html>